<template>
    <div style="display: flex; justify-content: center; padding-top: 10px">
        <v-menu
            v-model="menu"
            :close-on-content-click="false"
            :close-on-back="false"
            location="bottom"
            persistent
        >
            <template v-slot:activator="{ props: menu }">
                <v-btn
                    color="#009dff"
                    v-bind="menu"
                    :disabled="!design.editCss"
                >
                    add JavaScipt
                </v-btn>
            </template>
            <v-card min-width="300">
                <div
                    style="display: flex; align-items: center; min-height: 50px"
                >
                    <p style="padding-left: 5%">Target</p>
                    <TargetMenu></TargetMenu>
                </div>
                <v-divider></v-divider>
                <div :style="{ opacity: disabled ? '0.6' : '1' }">
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            min-height: 50px;
                        "
                    >
                        <p style="padding-left: 5%">Trigger</p>
                        <CommonMenu
                            :menus="trigger_menu"
                            type="interActiveTrigger"
                            :disabled="disabled"
                        ></CommonMenu>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            min-height: 50px;
                        "
                    >
                        <p style="padding-left: 5%">Command</p>
                        <CommonMenu
                            :menus="command_menu"
                            type="interActiveCommand"
                            :disabled="disabled"
                        ></CommonMenu>
                    </div>
                </div>
                <v-divider></v-divider>
                <CommandItem
                    v-if="!disabled"
                    :attrDict="attrDict[design.interActive.interActiveCommand]"
                ></CommandItem>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        variant="text"
                        @click="cancel"
                    >
                        Cancel
                    </v-btn>
                    <v-btn
                        color="primary"
                        variant="text"
                        @click="addJsFunction"
                        :disabled="disabled"
                    >
                        Save
                    </v-btn>
                </v-card-actions></v-card
            >
        </v-menu>
    </div>
    <div style="margin-top: 10px">
        <div
            style="
                display: flex;
                flex-flow: wrap;
                place-content: center;
                padding-top: 20px;
            "
        >
            <img
                src="https://assets.mockplus.cn/rp/assets/2023-10-11/rp/a296168bfb54c3ea86a99678563254d2.png"
            />
            <span style="margin-top: 10px; text-align: center"
                >Select the component or artboard and click Add JavaScipt
            </span>
        </div>
    </div>
    <div>
        <jsEdit></jsEdit>
    </div>
</template>

<script>
import TargetMenu from './components/TargetMenu.vue'
import CommonMenu from './components/CommonMenu.vue'
import CommandItem from './components/InterActive/ComandItem.vue'
import jsEdit from './components/InterActive/jsEdit.vue'
import { useDesignStore } from '../../../../stores/design'
import { useBoxStore } from '../../../../stores/box'

export default {
    name: 'InterActive',
    components: {
        TargetMenu,
        CommonMenu,
        CommandItem,
        jsEdit
    },
    data() {
        return {
            design: useDesignStore(),
            box: useBoxStore(),
            menu: false,
            trigger_menu: [
                'Click',
                'Hover',
                'MouseDown',
                'MouseUp',
                'MouseLeave'
            ],
            command_menu: ['Move', 'Zoom', 'Rotate'],
            attrDict: {
                Move: {
                    X: ['left', '%'],
                    Y: ['top', '%']
                },
                Zoom: {
                    width: ['width', '%'],
                    height: ['height', '%']
                },
                Rotate: {
                    rotateX: ['rotateX', '°'],
                    rotateY: ['rotateY', '°'],
                    rotateZ: ['rotateZ', '°']
                }
            },
            funcNameMap: {
                'Click': 'ClickFunctions',
                'Hover': 'HoverFunctions',
                'MouseDown': 'MouseDownFunctions',
                'MouseUp': 'MouseUpFunctions',
                'MouseLeave': 'MouseLeaveFunctions'
            }
        }
    },
    methods: {
        cancel() {
            const name = this.interActive.interActiveCommand.toLowerCase()
            if (this.interActive.interActiveName !== 'Select Target') {
                // 把相应添加函数的相关属性重置为默认值
                this.cancelAddJsFunction(name)
                // 重置interActive的相关属性
                this.interActive.interActiveName = 'Select Target'
                this.interActive.interActiveTrigger = 'Click'
                this.interActive.interActiveCommand = 'Move'
            }
            this.menu = false
        },
        canAdd(t) {
            const keys = Object.keys(t)
            for (var i = 0; i < keys.length; i++) {
                if (
                    !['duration', 'timer', 'relative'].includes(keys[i]) &&
                    t[keys[i]] === ''
                ) {
                    return false
                }
            }
            if (
                t.duration !== '' ||
                (t.duration === '' && t.slowMotion === 'none')
            ) {
                return true
            } else {
                return false
            }
        },
        addJsFunction() {
            const name = this.interActive.interActiveCommand
            const lowerName = name.toLowerCase()
            if (this.canAdd(this.design.template[lowerName])) {
                const t = this.interActive.interActiveTrigger
                this.template[lowerName][this.funcNameMap[t]] = {
                    ...this.design.template[lowerName]
                }
                this.design.addFunction(name)
                this.cancel()
                this.box.alert(
                    'success',
                    'Add Information',
                    'Successfully add!'
                )
            } else {
                this.box.alert(
                    'error',
                    'Add Information',
                    'Please complete the necessary information!'
                )
            }
        },
        cancelAddJsFunction(name) {
            const keys = Object.keys(this.design.template[name])
            for (var i = 0; i < keys.length; i++) {
                if (!['slowMotion', 'timer', 'relative'].includes(keys[i])) {
                    this.design.template[name][keys[i]] = ''
                }
            }
            this.design.template[name].relative = true
            this.design.template[name].slowMotion = 'linear'
        }
    },
    computed: {
        disabled() {
            return this.design.interActive.interActiveName === 'Select Target'
        },
        interActive() {
            return this.design.interActive
        },
        template() {
            return this.design.currentDomPointer.template
        }
    }
}
</script>
